import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:azring/models/group_interaction_models.dart';
import 'package:azring/core/config/api_config.dart';
import 'group_detail_logic.dart';

/// 群组详情页
class GroupDetailView extends GetView<GroupDetailLogic> {
  const GroupDetailView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
          onPressed: () => Get.back(),
        ),
        title: Obx(() => Text(
              controller.state.groupName.value,
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w600,
                color: Colors.white,
              ),
            )),
        centerTitle: true,
        actions: [
          IconButton(
            icon: Icon(Icons.people_outline, color: Colors.grey[400], size: 24.sp),
            onPressed: controller.navigateToMemberManagement,
          ),
        ],
      ),
      body: Column(
        children: [
          // 数据类型切换标签
          _buildDataTypeTabs(),
          
          // 可滚动内容
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(height: 20.h),
                  // 成员数据对比图表
                  _buildMemberDataChart(),
                  SizedBox(height: 30.h),
                  // 互动墙
                  _buildInteractionWall(),
                  SizedBox(height: 40.h),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 数据类型切换标签
  Widget _buildDataTypeTabs() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
      padding: EdgeInsets.all(4.w),
      decoration: BoxDecoration(
        color: const Color(0xFF1C1C1E),
        borderRadius: BorderRadius.circular(25.r),
      ),
      child: Obx(() => Row(
            children: [
              _buildTab('身体活力', 0),
              _buildTab('睡眠', 1),
              _buildTab('能量平衡', 2),
            ],
          )),
    );
  }

  Widget _buildTab(String title, int index) {
    final isSelected = controller.state.selectedDataType.value == index;
    return Expanded(
      child: GestureDetector(
        onTap: () => controller.switchDataType(index),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 10.h),
          decoration: BoxDecoration(
            color: isSelected ? const Color(0xFF2C2C2E) : Colors.transparent,
            borderRadius: BorderRadius.circular(25.r),
            boxShadow: isSelected
                ? [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    ),
                  ]
                : null,
          ),
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
              color: isSelected ? Colors.white : Colors.grey[500],
            ),
          ),
        ),
      ),
    );
  }

  /// 成员数据对比图表
  Widget _buildMemberDataChart() {
    return Obx(() {
      if (controller.state.isLoading.value) {
        return SizedBox(
          height: 300.h,
          child: const Center(child: CircularProgressIndicator()),
        );
      }

      return Container(
        margin: EdgeInsets.symmetric(horizontal: 20.w),
        child: Column(
          children: [
            // 图表区域
            SizedBox(
              height: 200.h,
              child: _buildBarChart(),
            ),
            SizedBox(height: 20.h),
            // 成员名称
            _buildMemberNames(),
            SizedBox(height: 12.h),
            // 日期
            Obx(() => Text(
                  controller.state.currentDate.value,
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey[600],
                  ),
                )),
          ],
        ),
      );
    });
  }

  /// 柱状图
  Widget _buildBarChart() {
    return Obx(() {
      final members = controller.state.memberList;
      if (members.isEmpty) return const SizedBox.shrink();

      final dataType = controller.state.selectedDataType.value;

      // 能量平衡需要特殊处理（有正负值）
      if (dataType == 2) {
        return _buildEnergyBalanceChart(members);
      }

      // 身体活力和睡眠使用普通柱状图
      final maxValue = members
          .where((m) => m.value != null)
          .map((m) => m.value!)
          .fold<int>(0, (max, val) => val > max ? val : max);

      return Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: members.map((member) {
          final value = member.value;
          final isQualify = member.isQualify;
          final isOptimum = member.isOptimum;
          return _buildBar(
            value?.toInt(),
            maxValue,
            isQualify: isQualify,
            isOptimum: isOptimum,
            isSleep: dataType == 1,
          );
        }).toList(),
      );
    });
  }

  /// 单个柱状图
  Widget _buildBar(
    int? value,
    int maxValue, {
    bool isQualify = false,
    bool isOptimum = false,
    bool isSleep = false,
  }) {
    if (value == null) {
      // 数据不足
      return Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(
              width: 40.w,
              height: 60.h,
              decoration: BoxDecoration(
                color: const Color(0xFF2C2C2E),
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Center(
                child: Text(
                  '数据不足',
                  style: TextStyle(
                    fontSize: 10.sp,
                    color: Colors.grey[500],
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      );
    }

    final height = maxValue > 0 ? (value / maxValue * 120.h).clamp(30.h, 120.h) : 30.h;
    
    // 睡眠：达成目标用浅灰色，未达成用深灰色
    Color barColor = Colors.grey[700]!;
    if (isSleep) {
      barColor = isQualify ? Colors.grey[400]! : Colors.grey[800]!;
    }

    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 今日最佳皇冠图标（仅睡眠）
          if (isSleep && isOptimum) ...[
            Icon(
              Icons.emoji_events,
              color: Colors.pink[300],
              size: 24.sp,
            ),
            SizedBox(height: 4.h),
          ] else if (isSleep) ...[
            SizedBox(height: 28.h),
          ],
          // 数值标签
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
            decoration: BoxDecoration(
              color: const Color(0xFF3A3A3C),
              borderRadius: BorderRadius.circular(4.r),
            ),
            child: Text(
              value.toString(),
              style: TextStyle(
                fontSize: 10.sp,
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          SizedBox(height: 4.h),
          // 柱子
          Container(
            width: 40.w,
            height: height,
            decoration: BoxDecoration(
              color: barColor,
              borderRadius: BorderRadius.circular(4.r),
            ),
          ),
        ],
      ),
    );
  }

  /// 能量平衡图表（支持正负值）
  Widget _buildEnergyBalanceChart(List<GroupMemberData> members) {
    // 找出最大正值和最大负值
    int maxPositive = 0;
    int maxNegative = 0;
    
    for (var member in members) {
      final value = member.value;
      if (value != null) {
        final intValue = value.toInt();
        if (intValue > 0 && intValue > maxPositive) {
          maxPositive = intValue;
        } else if (intValue < 0 && intValue.abs() > maxNegative) {
          maxNegative = intValue.abs();
        }
      }
    }

    final maxValue = maxPositive > maxNegative ? maxPositive : maxNegative;

    return Column(
      children: [
        // 正值区域标签
        Padding(
          padding: EdgeInsets.only(left: 20.w, bottom: 4.h),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              '1000 盈余',
              style: TextStyle(
                fontSize: 10.sp,
                color: Colors.grey[500],
              ),
            ),
          ),
        ),
        // 图表主体
        SizedBox(
          height: 160.h,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: members.map((member) {
              final value = member.value;
              return _buildEnergyBar(value, maxValue);
            }).toList(),
          ),
        ),
        // 负值区域标签
        Padding(
          padding: EdgeInsets.only(left: 20.w, top: 4.h),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text(
              '-1000 缺口',
              style: TextStyle(
                fontSize: 10.sp,
                color: Colors.grey[500],
              ),
            ),
          ),
        ),
      ],
    );
  }

  /// 能量平衡单个柱子
  Widget _buildEnergyBar(int? value, int maxValue) {
    if (value == null) {
      return Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 40.w,
              height: 60.h,
              decoration: BoxDecoration(
                color: const Color(0xFF2C2C2E),
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Center(
                child: Text(
                  '数据不足',
                  style: TextStyle(
                    fontSize: 10.sp,
                    color: Colors.grey[500],
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      );
    }

    final isPositive = value >= 0;
    final height = maxValue > 0 ? (value.abs() / maxValue * 60.h).clamp(20.h, 60.h) : 20.h;

    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 正值部分
          if (isPositive) ...[
            Container(
              padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
              decoration: BoxDecoration(
                color: const Color(0xFF3A3A3C),
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Text(
                value.toString(),
                style: TextStyle(
                  fontSize: 10.sp,
                  color: Colors.white,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            SizedBox(height: 4.h),
            Container(
              width: 40.w,
              height: height,
              decoration: BoxDecoration(
                color: Colors.grey[700],
                borderRadius: BorderRadius.circular(4.r),
              ),
            ),
            SizedBox(height: 60.h), // 占位，保持对齐
          ] else ...[
            SizedBox(height: 60.h), // 占位，保持对齐
            Container(
              width: 40.w,
              height: height,
              decoration: BoxDecoration(
                color: Colors.grey[700],
                borderRadius: BorderRadius.circular(4.r),
              ),
            ),
            SizedBox(height: 4.h),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
              decoration: BoxDecoration(
                color: const Color(0xFF3A3A3C),
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Text(
                value.toString(),
                style: TextStyle(
                  fontSize: 10.sp,
                  color: Colors.white,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ],
        ],
      ),
    );
  }

  /// 成员名称列表
  Widget _buildMemberNames() {
    return Obx(() {
      final members = controller.state.memberList;
      final isSleep = controller.state.selectedDataType.value == 1;
      
      return Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: members.map((member) {
              return Expanded(
                child: Text(
                  member.userName,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey[400],
                  ),
                ),
              );
            }).toList(),
          ),
          // 睡眠数据显示图例
          if (isSleep) ...[
            SizedBox(height: 12.h),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _buildLegendItem('达成目标', Colors.grey[400]!),
                SizedBox(width: 16.w),
                _buildLegendItem('未达目标', Colors.grey[800]!),
                SizedBox(width: 16.w),
                Row(
                  children: [
                    Icon(
                      Icons.emoji_events,
                      color: Colors.pink[300],
                      size: 16.sp,
                    ),
                    SizedBox(width: 4.w),
                    Text(
                      '今日最佳',
                      style: TextStyle(
                        fontSize: 11.sp,
                        color: Colors.grey[500],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ],
      );
    });
  }

  /// 图例项
  Widget _buildLegendItem(String label, Color color) {
    return Row(
      children: [
        Container(
          width: 12.w,
          height: 12.w,
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(2.r),
          ),
        ),
        SizedBox(width: 4.w),
        Text(
          label,
          style: TextStyle(
            fontSize: 11.sp,
            color: Colors.grey[500],
          ),
        ),
      ],
    );
  }

  /// 互动墙
  Widget _buildInteractionWall() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Row(
            children: [
              Container(
                width: 32.w,
                height: 32.w,
                decoration: BoxDecoration(
                  color: const Color(0xFF2C2C2E),
                  borderRadius: BorderRadius.circular(8.r),
                ),
                child: Icon(
                  Icons.forum_outlined,
                  size: 18.sp,
                  color: Colors.grey[400],
                ),
              ),
              SizedBox(width: 8.w),
              Text(
                '互动墙',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              const Spacer(),
              // 今日/全部切换按钮
              Obx(() => GestureDetector(
                    onTap: controller.toggleInteractionFilter,
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
                      decoration: BoxDecoration(
                        color: const Color(0xFF2C2C2E),
                        borderRadius: BorderRadius.circular(20.r),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            controller.state.isShowingToday.value ? '今日' : '全部',
                            style: TextStyle(
                              fontSize: 13.sp,
                              color: Colors.white,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(width: 4.w),
                          Icon(
                            Icons.arrow_forward_ios,
                            size: 12.sp,
                            color: Colors.grey[500],
                          ),
                        ],
                      ),
                    ),
                  )),
            ],
          ),
          SizedBox(height: 16.h),
          // 互动列表
          Obx(() {
            if (controller.state.isLoadingInteractions.value) {
              return const Center(child: CircularProgressIndicator());
            }

            final displayedList = controller.displayedInteractions;

            return Column(
              children: [
                ...displayedList
                    .asMap()
                    .entries
                    .map((entry) => _buildInteractionCard(entry.value, entry.key))
                    .toList(),
                // 查看更多按钮
                if (controller.shouldShowMoreButton)
                  GestureDetector(
                    onTap: controller.toggleAllExpanded,
                    child: Container(
                      margin: EdgeInsets.only(top: 12.h),
                      padding: EdgeInsets.symmetric(vertical: 12.h),
                      decoration: BoxDecoration(
                        color: const Color(0xFF1C1C1E),
                        borderRadius: BorderRadius.circular(12.r),
                        border: Border.all(
                          color: Colors.grey[800]!,
                          width: 1,
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            '查看更多',
                            style: TextStyle(
                              fontSize: 13.sp,
                              color: Colors.grey[400],
                            ),
                          ),
                          SizedBox(width: 4.w),
                          Icon(
                            Icons.keyboard_arrow_down,
                            size: 18.sp,
                            color: Colors.grey[400],
                          ),
                        ],
                      ),
                    ),
                  ),
                // 收起按钮
                if (controller.shouldShowCollapseButton)
                  GestureDetector(
                    onTap: controller.toggleAllExpanded,
                    child: Container(
                      margin: EdgeInsets.only(top: 12.h),
                      padding: EdgeInsets.symmetric(vertical: 12.h),
                      decoration: BoxDecoration(
                        color: const Color(0xFF1C1C1E),
                        borderRadius: BorderRadius.circular(12.r),
                        border: Border.all(
                          color: Colors.grey[800]!,
                          width: 1,
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            '收起',
                            style: TextStyle(
                              fontSize: 13.sp,
                              color: Colors.grey[400],
                            ),
                          ),
                          SizedBox(width: 4.w),
                          Icon(
                            Icons.keyboard_arrow_up,
                            size: 18.sp,
                            color: Colors.grey[400],
                          ),
                        ],
                      ),
                    ),
                  ),
              ],
            );
          }),
        ],
      ),
    );
  }

  /// 获取完整的头像URL
  String _getFullAvatarUrl(String? avatar) {
    if (avatar == null || avatar.isEmpty) return '';
    if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
      return avatar;
    }
    return '${ApiConfig.baseUrl}$avatar';
  }

  /// 显示删除评论确认对话框
  void _showDeleteCommentDialog(int commentId) {
    Get.dialog(
      Dialog(
        backgroundColor: Colors.transparent,
        child: Container(
          decoration: BoxDecoration(
            color: const Color(0xFF1C1C1E),
            borderRadius: BorderRadius.circular(16.r),
          ),
          padding: EdgeInsets.all(20.w),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                '确认删除',
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 12.h),
              Text(
                '确定要删除这条评论吗？',
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.grey[400],
                ),
              ),
              SizedBox(height: 20.h),
              Row(
                children: [
                  Expanded(
                    child: GestureDetector(
                      onTap: () => Get.back(),
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 12.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFF2C2C2E),
                          borderRadius: BorderRadius.circular(12.r),
                        ),
                        child: Text(
                          '取消',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 15.sp,
                            color: Colors.grey[400],
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(width: 12.w),
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        Get.back();
                        controller.deleteComment(commentId);
                      },
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 12.h),
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(12.r),
                        ),
                        child: Text(
                          '删除',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 15.sp,
                            color: Colors.white,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 互动卡片
  Widget _buildInteractionCard(GroupInteraction interaction, int index) {
    final avatar = _getFullAvatarUrl(interaction.shareMemberAvatar);
    final hasAvatar = avatar.isNotEmpty;
    final comments = interaction.comments;
    final isAutomatic = interaction.isAutomatic;
    
    return Obx(() {
      final isExpanded = controller.state.expandedCards.contains(index);
      
      return GestureDetector(
        onTap: isAutomatic ? null : () => controller.toggleCardExpansion(index),
        onLongPress: () => controller.showActionMenu(index),
        child: Container(
          margin: EdgeInsets.only(bottom: 12.h),
          padding: EdgeInsets.all(16.w),
          decoration: BoxDecoration(
            color: const Color(0xFF1C1C1E),
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
          // 时间和分享标签
          Row(
            children: [
              Text(
                interaction.dailyValue,
                style: TextStyle(
                  fontSize: 11.sp,
                  color: Colors.grey[600],
                ),
              ),
              const Spacer(),
              if (!isAutomatic)
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
                  decoration: BoxDecoration(
                    color: const Color(0xFF2C2C2E),
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Text(
                    '${interaction.lingTiao ?? ''}分享',
                    style: TextStyle(
                      fontSize: 11.sp,
                      color: Colors.grey[500],
                    ),
                  ),
                ),
            ],
          ),
          SizedBox(height: 12.h),
          // 用户信息和内容
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 头像
              CircleAvatar(
                radius: 20.r,
                backgroundColor: const Color(0xFF3A3A3C),
                backgroundImage: hasAvatar ? NetworkImage(avatar) : null,
                child: !hasAvatar
                    ? Icon(
                        Icons.person,
                        size: 20.sp,
                        color: Colors.grey[500],
                      )
                    : null,
              ),
              SizedBox(width: 12.w),
              // 文本内容
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 用户名
                    Text(
                      interaction.shareMemberName,
                      style: TextStyle(
                        fontSize: 13.sp,
                        color: Colors.grey[400],
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(height: 6.h),
                    // isAutomatic = 1: 直接显示 content
                    if (isAutomatic) ...[
                      if (interaction.content != null && 
                          interaction.content!.isNotEmpty)
                        Text(
                          interaction.content!,
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.white,
                            height: 1.4,
                          ),
                        ),
                    ]
                    // isAutomatic = 0: 可展开查看详细信息
                    else ...[
                      // 折叠状态：显示简短提示
                      if (!isExpanded)
                        Text(
                          '点击查看我的今日签',
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.white,
                            height: 1.4,
                          ),
                        ),
                      // 展开状态：显示完整内容
                      if (isExpanded) ...[
                        // 日期标签（sunPillar）
                        if (interaction.sunPillar != null && 
                            interaction.sunPillar!.isNotEmpty) ...[
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 6.h),
                            decoration: BoxDecoration(
                              color: const Color(0xFF2C2C2E),
                              borderRadius: BorderRadius.circular(8.r),
                            ),
                            child: Text(
                              interaction.sunPillar!,
                              style: TextStyle(
                                fontSize: 12.sp,
                                color: Colors.grey[400],
                              ),
                            ),
                          ),
                          SizedBox(height: 8.h),
                        ],
                        // 健康评价
                        if (interaction.healthReviews != null && 
                            interaction.healthReviews!.isNotEmpty) ...[
                          Text(
                            '健康评价',
                            style: TextStyle(
                              fontSize: 13.sp,
                              color: Colors.grey[500],
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 4.h),
                          Text(
                            interaction.healthReviews!,
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colors.white,
                              height: 1.4,
                            ),
                          ),
                          SizedBox(height: 12.h),
                        ],
                        // 健康建议
                        if (interaction.healthAdvice != null && 
                            interaction.healthAdvice!.isNotEmpty) ...[
                          Text(
                            '健康建议',
                            style: TextStyle(
                              fontSize: 13.sp,
                              color: Colors.grey[500],
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 4.h),
                          Text(
                            interaction.healthAdvice!,
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colors.white,
                              height: 1.4,
                            ),
                          ),
                          SizedBox(height: 12.h),
                        ],
                        // 健康溯源
                        if (interaction.healthTraceability != null && 
                            interaction.healthTraceability!.isNotEmpty) ...[
                          Text(
                            '健康溯源',
                            style: TextStyle(
                              fontSize: 13.sp,
                              color: Colors.grey[500],
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          SizedBox(height: 4.h),
                          Text(
                            interaction.healthTraceability!,
                            style: TextStyle(
                              fontSize: 14.sp,
                              color: Colors.white,
                              height: 1.4,
                            ),
                          ),
                          SizedBox(height: 12.h),
                        ],
                        // 趣味彩蛋
                        if (interaction.funEasterEggs != null && 
                            interaction.funEasterEggs!.isNotEmpty) ...[
                          Container(
                            padding: EdgeInsets.all(10.w),
                            decoration: BoxDecoration(
                              color: const Color(0xFF2C2C2E),
                              borderRadius: BorderRadius.circular(8.r),
                            ),
                            child: Row(
                              children: [
                                Icon(
                                  Icons.lightbulb_outline,
                                  size: 16.sp,
                                  color: Colors.orange[300],
                                ),
                                SizedBox(width: 6.w),
                                Expanded(
                                  child: Text(
                                    interaction.funEasterEggs!,
                                    style: TextStyle(
                                      fontSize: 13.sp,
                                      color: Colors.orange[300],
                                      height: 1.3,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ],
                    ],
                  ],
                ),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          // 点赞和评论
          Row(
            children: [
              // 点赞
              GestureDetector(
                onTap: () => controller.likeInteraction(index),
                child: Row(
                  children: [
                    Icon(
                      Icons.favorite,
                      size: 16.sp,
                      color: interaction.likesCount > 0 ? Colors.red : Colors.grey[600],
                    ),
                    SizedBox(width: 4.w),
                    Text(
                      '${interaction.likesCount}',
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey[500],
                      ),
                    ),
                    SizedBox(width: 8.w),
                    // 点赞头像列表
                    if (interaction.thumbs.isNotEmpty)
                      ...List.generate(
                        interaction.thumbs.length.clamp(0, 3),
                        (i) {
                          final avatarUrl = _getFullAvatarUrl(interaction.thumbs[i].thumbMemberAvatar);
                          return Container(
                            margin: EdgeInsets.only(right: 4.w),
                            width: 20.w,
                            height: 20.w,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: const Color(0xFF3A3A3C),
                              image: avatarUrl.isNotEmpty
                                  ? DecorationImage(
                                      image: NetworkImage(avatarUrl),
                                      fit: BoxFit.cover,
                                    )
                                  : null,
                            ),
                          );
                        },
                      ),
                    if (interaction.thumbs.length > 3)
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFF2C2C2E),
                          borderRadius: BorderRadius.circular(10.r),
                        ),
                        child: Text(
                          '+${interaction.thumbs.length - 3}',
                          style: TextStyle(
                            fontSize: 10.sp,
                            color: Colors.grey[500],
                          ),
                        ),
                      ),
                  ],
                ),
              ),
              const Spacer(),
              // 评论
              GestureDetector(
                onTap: () => controller.commentInteraction(index),
                child: Row(
                  children: [
                    Icon(
                      Icons.chat_bubble_outline,
                      size: 16.sp,
                      color: Colors.grey[600],
                    ),
                    SizedBox(width: 4.w),
                    Text(
                      '评论${comments.isNotEmpty ? ' ${comments.length}' : ''}',
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey[500],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          // 评论列表（始终显示）
          if (comments.isNotEmpty) ...[
            SizedBox(height: 12.h),
            Container(
              padding: EdgeInsets.all(12.w),
              decoration: BoxDecoration(
                color: const Color(0xFF2C2C2E),
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: comments.map((comment) {
                  final commentAvatar = _getFullAvatarUrl(comment.commentMemberAvatar);
                  final hasCommentAvatar = commentAvatar.isNotEmpty;
                  
                  return GestureDetector(
                    onLongPress: () => _showDeleteCommentDialog(comment.commentId),
                    child: Padding(
                      padding: EdgeInsets.only(bottom: 8.h),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 评论者头像
                          CircleAvatar(
                            radius: 12.r,
                            backgroundColor: const Color(0xFF3A3A3C),
                            backgroundImage: hasCommentAvatar ? NetworkImage(commentAvatar) : null,
                            child: !hasCommentAvatar
                                ? Icon(
                                    Icons.person,
                                    size: 12.sp,
                                    color: Colors.grey[500],
                                  )
                                : null,
                          ),
                          SizedBox(width: 8.w),
                          // 评论内容
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  comment.commentMemberName,
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    color: Colors.grey[400],
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                SizedBox(height: 4.h),
                                Text(
                                  comment.commentContent,
                                  style: TextStyle(
                                    fontSize: 13.sp,
                                    color: Colors.white,
                                    height: 1.3,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                }).toList(),
              ),
            ),
          ],
            ],
          ),
        ),
      );
    });
  }

  
}
